<template>
  <div class="rightBodyContent" ref="applyHeight">
    <div class="rightBodyContent-in">
      <div class="apply-box">
        <!--        <tips optionTemplate="purchaseApply"></tips>-->
        <div class="mb-10 apply-header-line">
          <div class="mr-20">
            <el-button type="primary" size="small" plain @click="itemVisible=true">添加申请物品</el-button>
          </div>
          <div class="mr-20">
            审核流程:
            <el-select placeholder="请选择审核流程" size="small" v-model="flow_id" @change="changeApplyModule()">
              <el-option
                :label="item.title"
                :value="item.id"
                v-for="item in applyModule"
                :ksy="item.id">
              </el-option>
            </el-select>
          </div>

          <div v-if="flow_id">
            {{ settingName || '--' }}:
            <el-select placeholder="请选择审核人" size="small" v-model="settingExamin" multiple>
              <el-option
                :label="item.realname"
                :value="item.id"
                v-for="item in selectList"
                :ksy="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="iframeBox">
          <!--          <iframe ref="purchaseExcel" :src="$applyPurchase" frameborder="0" class="iframeShow"></iframe>-->
          <applyIframe @changeData="getFileFn" ref="applyIframe"></applyIframe>
        </div>
        <div class="footer-apply">
          <div class="apply-box-right-bottom">
            <div class="apply-box-right-bottom-l">
              <span>{{ goods_number }}件 总计</span><span class="price">{{
                count


              }}</span><span>元</span>
            </div>
            <div class="apply-box-right-bottom-b">
              <el-button plain size="mini" disabled v-if="downloadStatus">导出当前清单</el-button>
              <el-button plain size="mini" @click="getIframeDownFn(1)" v-if="wuliao_data.length">导出当前物料清单</el-button>
              <el-button plain size="mini" @click="getIframeDownFn(2)" v-if="teach_data.length">导出当前教具清单</el-button>
              <el-button type="primary" plain size="mini" @click="submitBtnFn">确认并提交申购</el-button>
              <el-button type="danger" plain size="mini" @click="clearList">一键清空</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    下载-->
    <div style="height: 0px;overflow: hidden;">
      <iframe :src="downExcelSrc" frameborder="0"></iframe>
    </div>
    <addGoods :cateList="cateList" :visible.sync="itemVisible" @addNewGoods="addNewGoods"></addGoods>
    <form style="display: none" enctype="multipart/form-data">
      <input type="file" accept="image/*" @change="handleFile('pic')" class="hiddenInput" id="uploadFile"
             ref="uploadFile"/>
    </form>
  </div>
</template>

<script>
import logopng from '@/assets/imageAdmin/logo.jpg'
import {purchaseIndex, purchaseDetail, purchaseExport} from '@/api/admin/purchase'
import {teachingCategoryIndex} from '@/api/admin/TeachingAids'
import addGoods from "./components/addGoods";
import applyIframe from "./components/applyIframe";

var XLSX = require('xlsx')

export default {
  name: "apply",
  components: {
    addGoods,
    applyIframe
  },
  data() {
    return {
      allowed: [
        'xlsx', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
        'xls', "application/vnd.ms-excel",
        'csv', "text/csv"],
      typeData: 'purchase_apply',
      logopng: logopng,
      tabPosition: 'materiel',
      infoForm: {
        name: '',
        cate_id: '',
        reason: '',
        unit: '', // "单位",
        need_number: 1,
        price: '',
        pic: '',
        url: '',
        expect_time: '',
        remark: '',
        cate_son_id: ''
      },
      heightBox: 0,
      purchase: [],
      cateList: {},
      imgType: '',
      count: 0,
      goods_number: 0,
      itemOption: '',
      itemVisible: false,
      itemIndex: 0,
      picIndex: 0,
      excelFile: '',
      selectList: [],
      settingName: '',
      settingExamin: [],
      applyModule: [],
      flow_id: '',
      downExcelSrc: '',
      newList: [],
      iframeWin: '', // 内嵌页面内容
      wuliao_data: [], // 物料数据
      teach_data: [], // 教具数据
      downloadStatus: true,
      flag: true,
      iframeStatus: true
    }
  },
  created() {
    this.getTeachCate()
    this.countPrice() // 计算总金额
    this.getApplyModule()
    this.getCategoryFn()
  },
  mounted() {
  },
  methods: {
    // 收到内嵌页面的回执内容
    getFileFn(data) {
      // let {data} = event.data
      // console.log('收到页面传输的数据回来:', event)
      if (!data) {
        return
      }
      // type init 页面完成加载 data 页面返回数据  total 价格
      if (data.type === 'init') {
        this.getCategoryFn()
      }
      if (data.type === 'submit') {
        // data: {material: excelList_, teach: teachingList_}
        let c = data.data.material.concat(data.data.teach)
        this.purchase = JSON.parse(JSON.stringify(c))
        this.wuliao_data = JSON.parse(JSON.stringify(data.data.material)) // 物料数据
        this.teach_data = JSON.parse(JSON.stringify(data.data.teach)) // 教具数据
        this.onSubmit()
      }
      if (data.type === 'download') {
        this.wuliao_data = JSON.parse(JSON.stringify(data.data.material)) // 物料数据
        this.teach_data = JSON.parse(JSON.stringify(data.data.teach)) // 教具数据
        this.downexcel()
      }
      if (data.type === 'downloadStatus') {
        this.wuliao_data = JSON.parse(JSON.stringify(data.data.material)) // 物料数据
        this.teach_data = JSON.parse(JSON.stringify(data.data.teach)) // 教具数据
        this.downloadStatus = false
      }
      if (data.type === 'total') {
        // data: {count: count, number: number_}
        this.goods_number = data.data.number
        this.count = data.data.count.toFixed(2)
      }
      if (data.type === 'picUpload') {
        this.actionSheet('list', data.data)
      }
    },
    // 需要将分类数据传输，
    verificationFrom() {
      this.$refs.applyIframe.checkCate(this.newList)
    },
    // 教具类目
    getCategoryFn() {
      teachingCategoryIndex({p: 1}).then(res => {
        this.newList = this.$handleTree(res.list, 'id', 'tid')
        this.verificationFrom()
      })
      // this.$post(api.tools_category_index, {p: 1}).then((response) => {
      //   console.log(response)
      //   if (response.code === 0) {
      //     this.newList = this.$handleTree(response.list, 'id', 'tid')
      //     let list = [{id: 0, name: '主类目'}]
      //     for (let item of this.newList) {
      //       list.push(this.getJson(item))
      //     }
      //     this.selectList = list
      //   } else {
      //     console.log('请求失败')
      //   }
      // }).catch((err) => {
      //   console.log(err)
      // })
    },
    // 获取流程模版
    getApplyModule() {
      purchaseIndex({p: 1}).then(res => {
        this.applyModule = res.list.data
        console.log(res)
      })
    },
    // 流程模版变了
    changeApplyModule() {
      this.settingName = '';
      this.selectList = [];
      this.settingExamin = [];
      for (let item of this.applyModule) {
        if (item.id === this.flow_id) {
          this.getModuleInfo(item.id)
        }
      }
    },
    // 获取模版详情信息
    getModuleInfo(id) {
      purchaseDetail({id: id}).then(res => {
        let {vo} = res
        if (vo.flows.length) {
          this.settingName = vo.flows[0].name;
          this.selectList = this.getJson(vo.flows[0].users);
        }
      })
    },
    addGoods() {
      let option = this.getJson(this.infoForm)
      if (!option.name) {
        this.$message.error(this.tabPosition === 'materiel' ? '填写物料名称' : '填写教具名称')
        return
      }
      if (this.tabPosition === 'teach') {
        if (!option.cate_id) {
          this.$message.error('选择教具分类')
          return
        }
      }
      if (!option.need_number) {
        this.$message.error('填写申购数量')
        return
      }
      if (this.tabPosition === 'materiel' && !option.unit) {
        this.$message.error('填写单位')
        return
      }
      option.type = this.tabPosition === 'materiel' ? 0 : 1; // 采购类型0物料1教具
      this.purchase.push(this.getJson(option));
      this.infoForm = {
        name: '',
        cate_id: '',
        reason: '',
        unit: '', // "单位",
        need_number: 1,
        price: '',
        pic: '',
        url: '',
        expect_time: '',
        remark: '',
        cate_son_id: ''
      }
      this.countPrice()
    },
    // 确认并提交
    submitBtnFn() {
      let that = this
      if (this.iframeStatus) {
        this.iframeStatus = false
        this.$refs.applyIframe.sendData('submit')
        // this.iframeWin.postMessage({
        //   method: '我需要你的数据',
        //   type: 'submit' // type 1 给予子页面分类 2 需要获取子页面内容数据
        // }, '*')
        setTimeout(() => {
          that.iframeStatus = true
        }, 1500)
      }
    },
    async onSubmit() {
      let that = this
      if (!this.flow_id) {
        this.$message.error('请选择审核流程')
        return
      }
      console.log('optionData:', this.flow_id, this.purchase)

      if (this.flag) {
        this.flag = false
      } else {
        return
      }
      let data = await this.$post(this.api.purchase.add, {
        flow_id: this.flow_id,
        list: JSON.stringify(this.purchase),
        type:3,
        now_examine: this.settingExamin.join(',')
      });
      if (!data.code) {
        this.clearList()
        this.$message.success('申购提交成功！')
        setTimeout(() => {
          that.flag = true
        }, 300)
      } else {
        this.$message.success(data.msg)
        setTimeout(() => {
          that.flag = true
        }, 300)
      }
    },
    // 编辑可编辑项
    editGoods(type, index) {
      this.itemOption = type;
      this.itemIndex = index;
      this.itemVisible = true;
    },
    actionSheet(option, index) {
      this.imgType = option;
      this.picIndex = index;
      if (option !== 'excel') {
        this.$el.querySelector('.hiddenInput').click()
      } else {
        this.$el.querySelector('.hiddenExcelInput').click()
      }

      // 来回切换 type 使得能够上传同一张图
      // setTimeout(()=>{
      //   this.$el.querySelector('.hiddenInput').setAttribute('type','text')
      // },200)
    },
    async handleFile(option) {
      // 此处不能使用event.target，否则手机上不能显示
      let n = this;
      let file = document.querySelector('#uploadFile')
      if (option === 'excel') {
        file = document.querySelector('#uploadExcelFile')
      }
      let formData = new FormData()
      if (file.files[0]) {
        // Indicator.open('上传中…')
        formData.append('file', file.files[0])
        // 接下来就可以用 ajax 提交 formData
        // this.handleBeforeUpload(file.files[0])
        let data = await this.$post('upload/oldupload', formData);
        if (!data.code) {
          if (this.imgType !== 'excel') {
            if (this.imgType === 'add') {
              n.infoForm.pic = data.data.name
            } else {
              // 传回子元素进行，添加图片
              n.postWindouIframe(data.data.name)
            }
            n.$refs.uploadFile.value = ''
          } else {
            n.excelFile = data.data.name
            n.getExcelDetail()// 获取excel中的数据
            n.$refs.uploadExcelFile.value = ''
          }
          // 来回切换 type text file 以便能够上传选择同一张图
          // setTimeout(() => {
          //   // Indicator.close()
          //   n.$el.querySelector('.hiddenInput').setAttribute('type','file')
          // }, 300)
        }
      }
    },
    async getTeachCate() {
      let data = await this.$post(this.api.tools_category_index, {p: 1});
      if (!data.code) {
        let list_ = data.list
        let obj_ = {}
        let obj_son = {}
        for (let i in list_) {
          if (list_[i].tid === 0) {
            obj_[list_[i].id] = list_[i]
          } else {
            if (obj_son[list_[i].tid]) {
              obj_son[list_[i].tid].push(list_[i])
            } else {
              obj_son[list_[i].tid] = [list_[i]]
            }
          }
        }
        this.coteryList = obj_
        let arrayList = []
        for (let i in obj_) {
          if (Number(i) !== 0) {
            if (obj_son[obj_[i].id]) {
              obj_[i].son = obj_son[obj_[i].id]
            }
            arrayList.push(obj_[i])
          }
        }
        this.cateList = this.getJson(obj_)
        // this.editFormVisible = false
      } else {
        console.log('请求失败')
      }
    },
    handleAvatarSuccess(res) {
      this.excelFile = res.data.name
      this.getExcelDetail()// 获取excel中的数据
    },
    async getExcelDetail() {
      let data = await this.$post(this.api.purchase.ExcelDetail, {file: this.excelFile});
      // need_number
      if (!data.code) {
        this.purchase = []
        let word_price = []
        let word_number = []
        for (let index in data.list) {
          data.list[index].cate_son_id = '';
          let price_ = Number(data.list[index].price)
          let nees_number = Number(data.list[index].need_number)
          if (isNaN(price_)) {
            console.log('price_:', price_)
            word_price.push(`【${Number(index) + 1}·${data.list[index].name}】`)
          }
          if (isNaN(nees_number)) {
            console.log('nees_number:', nees_number)
            word_number.push(`【${Number(index) + 1}·${data.list[index].name}】`)
          }
          // if (typeof(data.list[index].price) !== 'number') {
          //   console.log('data.list[index].price:', Number.parseFloat(data.list[index].price))
          //   word_.push(`【${Number(index) + 1}·${data.list[index].name}】`)
          // }
          // if(!Number.isNaN(data.list[index].need_number)){
          //   console.log('data.list[index].need_number:', Number.isNaN(data.list[index].need_number))
          // }
          this.purchase.push(this.getJson(data.list[index]));
        }
        let string_ = ''
        if (word_price.length) {
          string_ = string_ + word_price.join('') + '，价格格式错误！'
        }
        if (word_number.length) {
          string_ = string_ + word_number.join('') + '，数量格式错误！'
        }
        if (string_) {
          this.$confirm(string_, '错误提示', {
            confirmButtonText: '确定',
            showCancelButton: false,
            type: 'warning'
          }).then(() => {
          }).catch(() => {
          });
        }
        //  cate_son_id: '' 此处需要进行ID的判断
        this.countPrice()
      }

    },
    getChange() {
      this.cate_son_id = '';
    },
    groupTab(option) {
      if (option !== 'excel') {
        this.tabPosition = option
      }
    },
    checkList(option) {
      // purchase itemIndex
      // {name: this.itemlable,val: this.itemValue}
      console.log('得到的数据：', option)
      let list = this.getJson(this.purchase[this.itemIndex])
      list[option.name] = option.val
      this.$set(this.purchase, this.itemIndex, list)
      if (option.name === 'price') {
        this.countPrice()
      }
    },
    // 计算总金额
    countPrice() {
      let count = 0;
      let number = 0;
      for (let item of this.purchase) {
        count = count + parseFloat(item.price) * Number(item.need_number);
        number = number + Number(item.need_number)
      }
      this.goods_number = number;
      this.count = count.toFixed(2);
    },
    // 获取物料
    async getmMterial(cb, name) {
      let data = await this.$fetch(this.api.admin_materiel_index, {p: 1, name: name});
      if (!data.code) {
        for (let item of data.list.data) {
          item.testname = item.name
          item.name = item.name + '/' + item.unit
        }
        // this.arryList = data.list.data;
        cb(data.list.data);
      }
    },
    // 获取教具
    async getTeaching(cb, name) {
      let data = await this.$fetch(this.api.tools_index, {p: 1, name: name});
      if (!data.code) {
        // this.arryList = data.list.data;
        cb(data.list.data);
      }
    },
    querySearch(queryString, cb) {
      console.log('请求服务起：', queryString)
      let that = this;
      // let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        // cb(results);
        if (that.tabPosition === 'materiel') {
          that.getmMterial(cb, queryString)
        } else {
          that.getTeaching(cb, queryString)
        }
      }, 3000 * Math.random());
    },
    // 是选中某一列触发的事件,在这里item为选中字段所在的对象
    handleSelect(option) {
      console.log('选中的某项', option);
      if (this.tabPosition === 'materiel') {
        this.infoForm.name = option.testname;
        this.infoForm.unit = option.unit;
      } else {
        // 判断分类
        if (option.cate_id) {
          if (this.cateList[option.cate_id]) {
            this.infoForm.cate_id = option.cate_id;
            // 如果是二级分类，设置 cate_son_id
            if (option.tid !== 0) {
              this.infoForm.cate_son_id = option.id;
            } else {
              this.infoForm.cate_son_id = '';
            }
          } else {
            for (let item in this.cateList) {
              if (this.cateList[item].son) {
                for (let m of this.cateList[item].son) {
                  if (m.id === option.cate_id) {
                    this.infoForm.cate_id = Number(item);
                    this.infoForm.cate_son_id = m.id;
                  }
                }
              }
            }
          }
        }
      }
    },

    addSub(type, index) {
      // type 1 减 2 加
      let option = this.getJson(this.purchase[index])
      if (type === 1) {
        if (option.need_number === 1) {
          return
        }
        if (Number(option.need_number) > 1) {
          option.need_number = Number(option.need_number) - 1;
        }
      } else {
        option.need_number = Number(option.need_number) + 1;
      }
      this.$set(this.purchase, index, option)
      this.countPrice()
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    clearList() {
      // document.querySelector('iframe').contentWindow.location.reload();
      this.purchase = [];
      this.goods_number = 0;
      this.count = 0;
      this.flow_id = ''
      this.$refs.applyIframe.clearList()
    },
    deleteFn(index) {
      this.purchase.splice(index, 1)
      if (this.purchase.length) {
        this.countPrice()
      } else {
        this.goods_number = 0;
        this.count = 0;
      }
    },
    // 同步数据
    getInformation(option) {
      for (let item of option) {
        if (item.type === 'img' && item.number === 1) {
          this.infoForm.pic = item.value[0].url
        }
      }
    },
    // 通讯子页面进行数据
    getIframeDownFn(option) {
      this.downExcelSrc = ''
      this.download_type = option
      this.$refs.applyIframe.sendData('download')
      // this.iframeWin.postMessage({
      //   method: '我需要你的数据',
      //   type: 'download' // type 1 给予子页面分类 2 需要获取子页面内容数据
      // }, '*')
    },
    downexcel() {
      let that = this
      purchaseExport({
        type: this.download_type,
        list: this.download_type === 1 ? JSON.stringify(this.wuliao_data) : JSON.stringify(this.teach_data),
      }).then(res => {
        // this.fileDownload(res, '申购当前清单.xlsx')
        if (res.code === 0) {
          this.triggerDownload(res.file);
        } else {
          this.$message.error('文件下载失败: ' + res.msg);
        }
        this.downExcelSrc = ''
        setTimeout(() => {
          that.downExcelSrc = this.$BASE_URL + res.file
        }, 200)
      })
      // let request = `${this.$openBASE_URL('http')}purchase/export_now`
      // this.$http({
      //   method: 'post',
      //   url: request,
      //   data:{
      //     type: this.tabPosition === 'materiel' ? 1 : 2,
      //     list: JSON.stringify(optionData)
      //   },
      //   responseType: 'arraybuffer'
      // })
      //     .then(
      //         function (response) {
      //           // let filename = this.editForm.phone + '物料（明细）.xlsx'
      //           // 导出的名称
      //           this.fileDownload(response.data, '申购当前清单.xlsx')
      //         }.bind(this)
      //     )
      //     .catch(
      //         function (error) {
      //           alert('网络请求出错')
      //         }
      //     )
    },
    fileDownload(data, fileName) {
      let blob = new Blob([data], {
        type: 'application/octet-stream'
      })
      let filename = fileName || 'filename.xls'
      if (typeof window.navigator.msSaveBlob !== 'undefined') {
        window.navigator.msSaveBlob(blob, filename)
      } else {
        let blobURL = window.URL.createObjectURL(blob)
        let tempLink = document.createElement('a')
        tempLink.style.display = 'none'
        tempLink.href = blobURL
        tempLink.setAttribute('download', fileName)
        if (typeof tempLink.download === 'undefined') {
          tempLink.setAttribute('target', '_blank')
        }
        document.body.appendChild(tempLink)
        tempLink.click()
        document.body.removeChild(tempLink)
        window.URL.revokeObjectURL(blobURL)
      }
    },
    // 识别采购文件,
    async handleBeforeUpload(file) {
      //选择文件后
      let _this = this
      console.log('file:', file)
      //检测文件类型
      if (!_this.checkFileType(file)) {
        console.log('抱歉，请选择excel文件')

        _this.showLoading(false)
        return false
      }

      //选择excel文件后，并读取其内容（文件流）
      let dataBinary = await this.analysis(file)
      console.log('识别的文件', dataBinary)
      // if (dataBinary != null) {
      //   this.testFn(dataBinary)
      // }
    },
    //解析excel
    analysis(file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader();
        reader.onload = function (e) {
          const data = e.target.result;
          this.wb = XLSX.read(data, {
            type: "binary"
          });
          const result = [];
          this.wb.SheetNames.forEach(sheetName => {
            console.log(sheetName)
            result.push({
              sheetName: sheetName,
              sheet: XLSX.utils.sheet_to_json(this.wb.Sheets[sheetName])
            });
          });
          resolve(result);
        };
        reader.readAsBinaryString(file);
        // reader.readAsBinaryString(file) // 传统input方法
      });
    },
    beforeAvatarUpload(file) {
      console.log('上传之前：', file)
      if (!this.checkFileType(file)) {
        this.$message.error('抱歉，请选择excel文件')
        return
      }
    },
    checkFileType(file) {
      let _this = this

      let flog = false

      //得到上传文件的值
      let fileName = file.name
      console.log('fileName:', fileName)
      //取其类型
      let fileType = fileName.lastIndexOf('.')

      //返回位于String对象中指定位置的子字符串并转换为小写.
      let extension = fileName
        .substring(fileType)
        .toLowerCase()
        .replace('.', '')
      //判断允许上传的文件格式
      if (_this.allowed.includes(extension)) {
        flog = true
      } else {
        flog = false
      }

      return flog
    },
    // 给子组件数据
    addNewGoods(option) {
      this.$refs.applyIframe.addNewgoods(option)
      // this.iframeWin.postMessage({
      //   method: '给你新增项',
      //   data: option,
      //   type: 'newGoods' // type 1 给予子页面分类 2 需要获取子页面内容数据
      // }, '*')
    },
    triggerDownload(url) {
      const link = document.createElement('a');
      link.href = url;
      link.download = '申购当前清单.xlsx'; // 设置下载的文件名
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    postWindouIframe(pic) {
      let data_ = this.getJson(this.picIndex)
      data_.pic = pic
      this.$refs.applyIframe.picSetFn(data_)
      // this.iframeWin.postMessage({
      //   method: '图片',
      //   data: data_,
      //   type: 'picUpload' // type 1 给予子页面分类 2 需要获取子页面内容数据
      // }, '*')
    }
  }
}
</script>

<style scoped>
.apply-box-left-from .el-form-item {
  margin-bottom: 10px;
}

.iframeBox {
  width: 100%;
  flex: 1;
  height: calc(100vh - 284px);
}

.apply-header-line {
  width: 100%;
  display: flex;
  align-items: center;
  height: 40px;
}

.footer-apply {
  width: 100%;
}

.apply-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(100vh - 170px);
}

.iframeShow {
  width: 100%;
  height: 100%;
}

.apply-box-left {
  flex: 1;
  margin-right: 20px;
}

.apply-box-right {
  width: 500px;
  border: 1px solid #999;
  border-radius: 5px;
  background: #ffe5c2;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.apply-box-right-top {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

.apply-box-right-bottom {
  background: #fff;
  height: 73px;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  /*border-top: 1px solid #999;*/
}

.apply-box-right-bottom-l {
  height: 40px;
  text-align: right;
  line-height: 40px;
}

.apply-box-right-bottom-l span {
  font-size: 16px;
}

.apply-box-right-bottom-l span.price {
  color: #1b8de5;
  font-size: 20px;
  padding: 0 5px;
}

.apply-box-right-bottom-b {
  text-align: right;
}

.apply-box-right-list {
  margin-bottom: 10px;
  border-bottom: 1px dashed #333;
  padding-bottom: 15px;
  cursor: pointer;
}

.apply-box-right-list:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.apply-box-right-list-top {
  display: flex;
  margin-bottom: 5px;
}

.apply-box-right-list-top div {
  flex: 1;
}

.apply-box-right-list-top div span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 230px;
  display: block;
}

.apply-box-right-list-box {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 10px;
  position: relative;
}

.detele-box {
  position: absolute;
  right: -10px;
  top: -15px;
  font-size: 28px;
  color: red;
}

.detele-box:hover {
  text-decoration: underline;
}

.rightapply-box-right-list-box-img {
  display: flex;
  align-items: center;
  width: 230px;
}

.rightapply-box-right-list-box-img-in {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f4;
  margin-right: 10px;
}

.rightapply-box-right-list-box-img-in i {
  font-size: 40px;
  color: #aaa;
}

.rightapply-box-right-list-box-img-title {
  font-size: 16px;
}

.rightapply-box-right-list-box-img-title p:last-child {
  font-size: 14px;
  color: #999;
}

.rightapply-box-right-list-box-number {
  display: flex;
  align-items: center;
  width: 110px;
  margin: 0 10px;
}

.rightapply-box-right-list-box-number span {
  font-size: 22px;
  cursor: pointer;
}

.rightapply-box-right-list-box-number span:hover {
  text-decoration: underline;
}

.rightapply-box-right-list-box-price {
  font-size: 20px;
  flex: 1;
  text-align: center;
}

.rightapply-box-right-list-box-price span {
  font-size: 14px;
}

.rightapply-box-right-list-box-price:hover {
  text-decoration: underline;
}

.inline-input {
  width: 100%;
}

.apply-box-left-from {
  background: #f4f4f4;
  padding: 10px 20px;
}

.add-img .rightapply-box-right-list-box-img-in {
  border: 1px solid #ddd;
  background: #fff;
}

.apply-nonedata {
  text-align: center;
  color: #999;
  font-size: 20px;
  padding: 150px 0;
}

.upload-demo-line {
  display: flex;
  align-items: center;
  justify-content: center;
}

.el-upload__tip {
  text-align: center;
}
</style>
